import React, { Component } from 'react'
import { createContext } from 'react'
/*
    跨多层组件通信  context   提供者/消费者模式
    1、创建Context对象 导出Provider和Consumer对象   createContext需要从 react 导入
        const {Provider, Consumer} = createContext()
    2、使用Provider包裹根组件提供数据
        <Procider value={this.state.value}>根组件</Provider>
    3、需要用到数据的组件使用Consumer包裹获取数据
        <Consumer}>{value}</Consumer>
*/

const { Provider, Consumer } = createContext()

class ComA extends Component {
  render() {
    return (
      <div>
        this is ComA
        <ComB />
      </div>
    )
  }
}


class ComB extends Component {
  render() {
    return (
      <div>
        this is ComB
        {/* 使用Consumer包裹接受爷爷组件传递的参数 */}
        <Consumer>
          {value => <p>{value}</p>}
        </Consumer>
      </div>
    )
  }
}


export default class Test7_com_context extends Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      // 使用 Provider 包裹组件 ,必须要传一个value,传递数据
      <Provider value={this.state.message}>
        <div>
          <ComA />
        </div>
      </Provider>
    )
  }
}
